<template>
    <div class="out">
        <div class="ft-red">
            <p> 仅在页面需要它渲染时才会调用加载内部实际组件的函数,异步的包装组件无缝地替换原始组件,可以配置加载中不同情况展示不同的页面以及延迟的时间</p>
            <p>场景：点击页面中某个按钮时才展示某个组件内容，此时就可以异步导入这个组件。因为这样页面刚加载时会忽略他，提高渲染展示的效率</p>
            <el-button type="danger" @click="clickBtn">异步btn</el-button>
        </div>
        <!-- v-if 页面刚加载时会忽略 ChildE 组件 ,只有在点击页面中的按钮时,才会加载里面内容-->
        <ChildE v-if="isSeeE"></ChildE>
        <span class="line"></span>

        <div class="ft-red">
            <p>props: 子组件标签上v-bind绑定一个对象posts包含多个属性,在子组件中也要逐个声明 ; 子组件校验传递过来的属性</p>
            <p>子组件中, 推荐模板表达式中使用 $emit() 发送监听事件给父组件. </p>
            <p>点击下面的按钮:{{ txtf }}</p>
        </div>
        <ChildA v-bind="posts" @change-txt="t => { txtf = t }"></ChildA>
        <span class="line"></span>
        <div class="ft-red">
            <p>v-model: 子组件中的 input输入框 ，在父子组件之间的交互传值时使用. </p>
            <p>v-model: 自定义修饰符 uppersd ：输入的第一个字母转出大写 , 只在输入框键入的时候生效，对定义的初始值不生效 </p>
            <h4>{{ firstName }}.{{ lastName }}---{{ fullName }}</h4>
            <ChildB v-model:first="firstName" v-model:last="lastName" v-model.uppersd="fullName">
            </ChildB>
        </div>
        <span class="line"></span>
        <div class="ft-red">
            <p>组件透传：传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。最常见的例子就是 class、style 和 id </p>
            <p>通常是先禁用默认透传，再通过 $attr 去自主控制透传属性</p>
            <p>透传过去的属性，被动态改变时，子组件不能响应式一起改变。若要响应式,那就在子组件中，使用onUpdated去监听获取最新值</p>
            <el-button @click="chgId" type="danger">chgId-attrs</el-button>
            <ChildC :id="attrId" style="font-size: 40px;"></ChildC>
        </div>
        <span class="line"></span>
        <div class="ft-red">
            <p>插槽内容可以访问到父组件的数据, 无法访问子组件的数据 </p>
            <p>父组件模板中的表达式只能访问父组件的作用域；子组件模板中的表达式只能访问子组件的作用域</p>
            <p>具名作用域插槽:可以访问到子组件中绑定到slot标签上的所有属性, 能访问子组件中的属性</p>
            <ChildC>
                <template #aa>cha cao nei ronggg 1====></template>
                <template #bb="items">cha cao nei rong 2:: {{ items }}</template>
                <template #cc="itemObj">cha cao nei rong 3:: {{ itemObj }}---{{ posts }}</template>
            </ChildC>
        </div>
        <span class="line"></span>
    </div>


</template>
<script setup>
import ChildA from './child/ChildA.vue';
import ChildB from './child/ChildB.vue';
import ChildC from './child/ChildC.vue';
import { reactive, ref, provide, defineAsyncComponent } from 'vue'
import { msg1, msg2, msg3 } from './js/symblo_name.js'
// 异步导入组件 , ChildE 按常规组件的使用方法去使用即可
// 场景: 一般是在加载组件前需要过渡页，加载失败时需要展示页，此时可以使用，因为异步组件支持这些配置
const ChildE = defineAsyncComponent(
    {
        // 加载函数
        loader: () => import('./child/ChildE.vue'),
        // 加载异步组件时使用的组件
        loadingComponent: ChildA,
        // 展示加载组件前的延迟时间，默认为 200ms
        delay: 200,
        // 加载失败后展示的组件
        errorComponent: ChildB,
        // 如果提供了一个 timeout 时间限制，并超时了
        // 也会显示这里配置的报错组件，默认值是：Infinity
        timeout: 3000
    }
)
const isSeeE = ref(false)
function clickBtn() {
    isSeeE.value = true
}
// props , $emit()
const txtf = ref('')
const posts = reactive({
    title: 'jakxx',
    age: 20
})
// v-model
const firstName = ref('jone')
const lastName = ref('das')
const fullName = ref('')
// 依赖注入 --- 传给 D 组件
const mssg = reactive({ name: 'jack', age: 25 })
function changMssg() {
    mssg.name = 'Tome'
}
provide(msg1, { mssg, changMssg })
provide(msg2, 'symbol_msg2')
provide(msg3, ['10', '20'])
// 动态修改 '透传' 的属性id值
const attrId = ref('custom-layout-chg')
function chgId() {
    attrId.value = 'pptg'
}
</script>
<style lang='scss' scoped>
@import '../../xunlian/common/css/comcss'
</style>